<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css"> -->
    {css href="__CSS__bootstrap.min.css"}
    {css href="__CSS__toastr.min.css"}

    {css href="__INDEX__reset.css"}


</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12 bg-primary p20">
            <H1>{$title}</H1>
            <hr>
            <a href="{:url('rest/user/index')}" class="btn-danger btn-sm">用户列表</a>
            <a href="{:url('rest/user/create')}" class="btn-danger btn-sm">增加用户</a>

        </div>
    </div>

    <div class="clearfix"></div>

    {block name="main"}
    <div class="row mt30">
        <div class="col-md-6">
            <table class="table table-hover bg-info ">
                <tr >
                    <th>id</th>
                    <th>name</th>
                    <th class="col-md-6 ">action</th>
                </tr>


                {volist name="list" id="v" }
                {eq name="mod" value="0"}
                <tr>
                    <td>{$v.id}</td>
                    <td>{$v.name}</td>
                    <td class="col-md-6">
                        <button data-id="{$v.id}" class="btn-xs btn-default show-btn" data-toggle="modal" data-target="#myModal" >查看信息,框</button>
                        <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn-xs btn-default">查看信息,页面</a>
                        <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn-xs btn-primary">编辑</a>

                        <button data-id="{$v.id}" class="btn-xs btn-danger del-btn" >删除</button>

                    </td>
                </tr>
                {/eq}
                {/volist}
            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-hover bg-info ">
                <tr >
                    <th>id</th>
                    <th>name</th>
                    <th class="col-md-6 ">action</th>
                </tr>


                {volist name="list" id="v" }
                {eq name="mod" value="1"}
                <tr>
                    <td>{$v.id}</td>
                    <td>{$v.name}</td>
                    <td class="col-md-6">
                        <button data-id="{$v.id}" class="btn-xs btn-default show-btn" data-toggle="modal" data-target="#myModal">查看信息,框</button>

                        <a href="{:url('rest/user/readpage',['id'=>$v['id']])}" class="btn-xs btn-default">查看信息,页面</a>
                        <a href="{:url('rest/user/edit',['id'=>$v['id']])}" class="btn-xs btn-primary">编辑</a>

                        <button data-id="{$v.id}" class="btn-xs btn-danger del-btn" >删除</button>

                    </td>
                </tr>
                {/eq}
                {/volist}
            </table>
        </div>

    </div>
    {/block}
</div>






{block name="modal"}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">用户的信息</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="__INDEX__face/batman.jpg" width="100">
                    </div>
                    <div class="col-md-9">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{/block}


{js href="__JS__jquery.min.js"}
{js href="__JS__bootstrap.js"}

{block name="js"}
{js href="__JS__toastr.min.js"}

<script>
    $(function(){
        //删除
        $('.del-btn').click(function(){
            var ac_id=$(this).attr('data-id');
            var tr=$(this).parents('tr');

            console.log(tr);


            if (confirm('真的要这样么?')) {
                delAjax(ac_id,tr);
            }
        });
        //查看信息
        $('.show-btn').click(function(){
            var ac_id=$(this).attr('data-id');
            showAjax(ac_id);

        });


    });

    function showAjax(id){
        $.ajax({
            'method':'get',
            'url':'/users/'+id,
            'dateType':'json',
            success:function(data) {
                // console.log(data);
                if (data.status){
                    $('.modal-title').html(data.title);
                    var msg= data.datas['id']+data.datas['name']+data.datas['age'];
                    $('.modal-body').html(msg);

                }else{
                    $('.modal-title').html(data.title);
                    $('.modal-body').html(data.datas);

                }
            },
            error:function(){
                alert('ajax执行失败');
            }

        });
    }


    function delAjax(id,tr){
        $.ajax({
            'method':'delete',
            'url':'/users/'+id,
            'dateType':'json',
            success:function(data){
                if (data.status) {
                    toastr.success(data.info);
                    tr.remove();
                }else{
                    toastr.error(data.info);
                }

            },
            error:function(){
                alert('ajax执行失败');
            }

        });
    }



    $("td,th").addClass("text-center");


</script>
{/block}

</body>
</html>